<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="assets/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="assets/css/user.css"/>
    <script src="assets/js/axios-0.18.0.js"></script>
    <script src="assets/js/vuejs-2.5.16.js"></script>

    <script src="assets/element-ui/lib/index.js"></script>
<!--    <link rel="stylesheet" href="assets/elementui/index.css">-->
<!--    <script src="assets/elementui/index.js"></script>-->
    <script src="assets/js/jquery-3.3.1.min.js"></script>
<!--    <script src="assets/js/qs.js"></script>-->
</head>
<body>

<div id="app">

    <div class="content-header common-search-border1">
        <el-button class="butAdd" @click="handleCreate"> 新增用户
        </el-button>
    </div>
    <template style="margin:auto 0">
        <el-table :data="userList"   border  style="width: 80%;">
            <el-table-column prop="userName" label="用户名" width="120"> </el-table-column>
            <el-table-column prop="realName" label="真实姓名" width="120"> </el-table-column>
            <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
            <el-table-column prop="sex" label="性别" width="80"> </el-table-column>
            <el-table-column prop="birthday" label="出生日期" width="150"> </el-table-column>
            <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
            <el-table-column fixed="right" label="操作"  width="120">
                <template slot-scope="scope">
                    <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteUser(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>


    <!--TODO: 新增用户弹层
               :visible.sync 是否显示 (dialogFormVisible=true 显示, =false隐藏)
        -->
    <el-dialog title="新增用户" align="left" :visible.sync="dialogFormVisible" width="40%" top="8vh">
        <!--
            model	表单数据对象
            rules	表单验证规则
        -->
        <el-form label-width="120px" :model="user" ref="form">
            <!--
            prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
            -->
            <el-form-item label="用户名称：" prop="userName">
                <!-- v-model 双向数据绑定  autocomplete=off 取消自动补全功能-->
                <el-input v-model="user.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名：" prop="realName">
                <el-input v-model="user.realName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
                <el-input v-model="user.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期：" prop="birthday">
                <el-input v-model="user.birthday" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄：" prop="age">
                <el-input v-model="user.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别: " prop="roleIds">
                <!--
                 value / v-model	绑定值 (双向数据绑定)
                    multiple	是否多选
                -->
                <el-select v-model="updateUser.sex" clearable  placeholder="请选择">
                    <el-option
                            v-for="sex in sexList"
                            :key="sex.value"
                            :label="sex.label"
                            :value="sex.value">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCreateCancel">取 消</el-button>
            <el-button type="primary" @click="handleCreateConfirm(user)">确 定</el-button>
        </div>
    </el-dialog>

            <!-- 修改用户弹层 -->
    <el-dialog title="修改用户" align="left" :visible.sync="dialogUptFormVisible" width="40%" top="8vh">
        <el-form label-width="120px" :model="updateUser" ref="uptForm">
            <el-form-item label="用户名称：" prop="userName">
                <el-input v-model="updateUser.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
                <el-input v-model="updateUser.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名：" prop="realName">
                <el-input v-model="updateUser.realName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期：" prop="birthday">
            <el-input v-model="updateUser.birthday" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="年龄：" prop="age">
                <el-input v-model="updateUser.age" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="性别: " prop="sex">
                <el-select v-model="updateUser.sex" clearable  placeholder="请选择">
                    <el-option
                            v-for="sex in sexList"
                            :key="sex.value"
                            :label="sex.label"
                            :value="sex.value">
                    </el-option>
                </el-select>

            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleUpdateCancel">取 消</el-button>
            <el-button type="primary" @click="handleUpdateConfirm(updateUser)">确 定</el-button>
        </div>
        <!--动态获取updateUser.roleIds-->
    </el-dialog>

</div>
</body>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            userList:[{
                userName:"",
                realName:"",
                age:"",
                sex:"",
                birthday:"",
                email:""
            }] ,//用户信息,双向绑定
            dialogFormVisible: false, // 添加窗口显示状态
            dialogUptFormVisible: false,//修改窗口显示状态
            user: {
                userName:"",
                realName:"",
                age:"",
                sex:"",
                birthday:"",
                email:""
            },
            updateUser: {
                userName:"",
                realName:"",
                age:"",
                sex:{options: [{
                        value: '男',
                        label: '男'
                    }, {
                        value: '女',
                        label: '女'
                    }]},
                birthday:"",
                email:""
            },
            sexList:[{
                value:"男",
                label:"男"
            },{
                value:"女",
                label:"女"
            }]
        },
        methods:{
            deleteUser(id){
                console.log("id = ", id);
                axios.get("/deleteUser",{"params":{"userId":id}})
                    .then(response=>{
                        console.log("id = ", id);
                        console.log("response = ", response);
                        //重新请求当前页面
                        location.href="user2.html";
                    })
            },
            findAll(){
                axios.get("/findall")
                    .then(response=>{
                        console.log("response = ", response);
                        this.userList=response.data;
                    });
            },
            // 新增用户
            handleCreate() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
                this.dialogFormVisible = true;

            },
            //新增用户确定 TODO:
            handleCreateConfirm(user) {
                axios.get("/save",{"params":user})
                    .then(response=>{
                        console.log("response = ", response);
                        location.href="user2.html";
                    })
                this.dialogFormVisible = true;
            },
            //新增用户取消
            handleCreateCancel() {
                this.dialogFormVisible = false;
            },
            // 修改用户
            handleUpdate(row) {
                var t = this;
                //t.$refs['uptForm']:获取修改用户数据的表单el-form的对象
                if (t.$refs['uptForm']) {
                    t.$refs['uptForm'].resetFields();
                }
                //这里的数据是更新后的值还是更新前的，更新前的值，将用户数据回填到修改页面
                t.updateUser.id = row.id;
                t.updateUser.userName = row.userName;
                t.updateUser.realName = row.realName;
                t.updateUser.email = row.email;
                t.updateUser.age = row.age;
                t.updateUser.birthday = row.birthday;
                t.updateUser.sex = row.sex;

                //显示修改页面
                t.dialogUptFormVisible = true;

            },
            //修改用户确定
            handleUpdateConfirm(updateUser) {
                console.log("user = ",updateUser);
                //{"params":{"user":user}}
                axios.get("/updateUserById",{"params":updateUser})
                    .then(response=>{
                        location.href="user2.html";//刷新页面，也可以重新加载当前函数
                    });
                this.dialogUptFormVisible = false;
            },
            //修改用户取消
            handleUpdateCancel() {
                this.dialogUptFormVisible = false;
            }
        },
        created(){
            //页面加载完成--》查询所有
            this.findAll();
        }
    });
</script>

</html>